import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { Card, Icon, List } from 'antd';
import LinkButton from '../../components/link-button/link-button'
import memoryUtils from '../../utils/memoryUtils'
import { reqCategoryId } from '../../api/index'
import {IMG_URL} from '../../utils/constants'

export default class productDetail extends Component {
    state = {
        // 动态显示分类的名称
        categoryName: ''
    }

    async componentDidMount() {
        // 获取存储的商品数据
        const categoryId = memoryUtils.product.categoryId
        if (categoryId) {
            // // 发送请求
            const result = await reqCategoryId(categoryId)
            if (result.status === 0) {
                // 更新状态
                this.setState({categoryName:result.data.name})
            }
        }

    }
    render() {
        // 获取存储的商品数据
        const productDetail = memoryUtils.product
        // 如果直接刷新detail页面没有获取到对应的信息需要跳转到productHome组价
        if (!productDetail._id) {
            return <Redirect to="/admin/product" />
        }

        const title = (
            <span>
                <LinkButton onClick={() => { this.props.history.goBack() }}><Icon type="arrow-left" /></LinkButton>
                <span>商品管理</span>
            </span>
        )
        return (
            <div>
                <Card title={title}>
                    <List className="proDetail">
                        <List.Item>
                            <span>
                                <span className="title">商品名称:</span>
                                <span>{productDetail.name}</span>
                            </span>
                        </List.Item>
                        <List.Item>
                            <span>
                                <span className="title">商品描述:</span>
                                <span>{productDetail.desc}</span>
                            </span>
                        </List.Item>
                        <List.Item>
                            <span>
                                <span className="title">商品价格:</span>
                                <span>￥{productDetail.price}</span>
                            </span>
                        </List.Item>
                        <List.Item>
                            <span>
                                <span className="title">所属分类:</span>
                                <span>{this.state.categoryName}</span>
                            </span>
                        </List.Item>
                        <List.Item>
                            <span>
                                <span className="title">商品图片:</span>
                                <span>
                                    {
                                        productDetail.imgs.map((img) => {
                                            return <img src={IMG_URL + img} key={img} alt="图片" />
                                        })
                                    }
                                </span>
                            </span>
                        </List.Item>
                        <List.Item>
                            <span>
                                <span className="title">商品详情:</span>
                                <span dangerouslySetInnerHTML={{ __html: productDetail.detail }}></span>
                            </span>
                        </List.Item>
                    </List>
                </Card>
            </div>
        )
    }
}


/**
 *
 * 1. detail不知道要显示那个商品的信息，需要在 productHome 跳转的时候将信息传递给 productDetail
 *
 * 两个组件需要传送数据，不推荐通过params请求参数进行携带，因为需要传递一个对象，但这个对象中含有很多的内容信息需要传递
 *
 * 方法一：因为是通过路由的history进行跳转，可以使用这个state可选属性————！！！！但此方法只使用与browserRoute，不适用与hashRoute
 * push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目
 *
 * 在productHome组件中写state，在productDetail组件可以看到state中传递的是哪个对象
 * {
        title: '操作',
        render:(product)=>(
            <span>
            <LinkButton onClick={() => this.props.history.push('/admin/product/detail',product)}>详情</LinkButton>
            <LinkButton>修改</LinkButton>
            </span>
        )
    },
 *
 * 方法二：将product存放在公共的文件中memoryUtils
 * export default{
    user:storageUtils.getUser(),// 用来存储登陆用户的信息, 初始值为local中读取的user
    product: {}, // 需要查看的商品对象
    }
 *
 *
 * 2. productHome 中点击详情跳转前保存 product 值到内存中
 * <LinkButton
        onClick={() => {
        // 在内存中保存product
        memoryUtils.product = product
        this.props.history.push('/product/detail/' + product._id)
        }}
    >
        详情
    </LinkButton>

 *
 * 3. 在 detail 中获取内存中的product （该值不一定有，只有通过点击productHome跳转到detail才有，直接在浏览器中刷新页面时没有这个值），需增加判断：如果有这个值显示，如果没有这个值跳转回productHome
 *
 * 空对象空数组转为boolean 都为 true
 *
 * render(){
 *  const product = memoryUtils.product
 *  if(!product || !product._id){
 *     return <Redirect to="/admin/product" />>
 *    }
 * }
 *
 * 4. detail 中的数据根据product传输不同的内容来显示不同的内容
 * <List.Item>
    <span>
    <span className="title">商品价格:</span>
    <span>￥{product.prict}</span>
    </span>
    </List.Item>
*
 *
 * 5. detail 中的图片数据通过遍历的形式来显示（但从接口文档中发现，返回的数据只有图片的名称，"image-1559402448049.jpg"
 *  没有图片的存储基本路径 http://localhost:5000/upload，需要手动添加
 *
 *   5.1 在constants中定义这个基本的常量
 *  export const BASE_IMG = 'http://localhost:5000/upload/'
 *
 *   5.2 遍历图片的时候使用，并且遍历需要加上key
 * <Item>
    <span className="detail-left">商品图片:</span>
    <span>
        {
        product.imgs && product.imgs.map(img => <img className="detail-img" key={img} src={BASE_IMG + img} alt="img" />)
        }

    </span>
    </Item>
 *
 *
 * 6. 页面中的所有分类不能直接读取，由于接口文档返回的分类不是文字，而是id，需要通过请求【根据分类ID获取分类】来获取到分类的名称
 *
 *      6.1 设置【获取分类id】请求接口
        export const reqCategory = (categoryId) => ajax(BASE + '/manage/category/info', {
        params: {
            categoryId
        }
        })
 *
 *      6.2 detail 动态显示商品名称，所以需要设置state
 *      state = {
            categoryName: ''
        }
 *
 *      6.3 detail 的 componentDidMount 中发送请求更新状态
 *      async componentDidMount () {
        const product = memoryUtils.product
        if(product._id){
            this.getCategory(product.categoryId)
        }
      }
 *
 *      6.4 定义 getCategory 函数
 *      getCategory=async (categoryId)=>{
        const result = await reqProduct(categoryId)
        if (result.status === 0) {
            let categoryName = result.data
            // 更新状态
            this.setState({categoryName})
            }
        }

 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 */
